<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script type="text/javascript" src="js/jquery-3.3.-1.js"></script>
    <script type="text/javascript">

        $(function(){

            //1.操作页面radio绑定onclick监听事件
            $(":radio[name='oper']").bind('click',fun1);
            //2.为[添加上传文件]按钮绑定单击监听
            $("#addBtn").click(addFile);
            //3.未[取消上传文件]按钮绑定
            $(":button:last").click(cancelFun);
        });

        function cancelFun(){
            //1.获得被用户选中的所有的checkbox
            var  $obj = $(":checkbox[name='ck']:checked");
            //2.定位checkbox隶属的tr行
           $obj.each( // for (var index=0;index<$obj.length;index++){

                     function  (index,domObj){
                         var $tr = $(domObj).parent().parent();
                         //3.销毁tr
                         $tr.remove();
                     }
           );//}



        }





        function addFile(){
            //1.创建一个tr
            var $tr = $("<tr></tr>");
            //2.创建两个td
            var $td_1 = $("<td></td>");
            var $td_2 = $("<td></td>");
            //3.依次为每一个td填充内容
            $td_1.append("<input type='checkbox' name='ck'/>");
            $td_2.append("<input type='file'/>");
            //4.将两个td添加到tr
            $tr.append($td_1).append($td_2);
            //5.将tr添加到第一个table
            $("table:first").append($tr);



        }




        function fun1(){
            //1.获得用户单击的radio标签的value值
              var flag =  $(this).val(); // 1 or 2
            //2.决定页面中哪些标签可以显示或则隐藏
            if(flag ==1 ){//单个学员添加操作
                $("table :first tr:lt(5)").show();
                $("table:eq(1)").hide();
                $("table:first  tr:gt(4)").hide();
            }else{//多文件学员信息上传
                $("table:eq(1)").show();
                $("table:first  tr:gt(4)").show();
                $("table :first tr:lt(5)").hide();
                $("table :first tr:first").show();
            }
        }

     </script>
</head>
<body>

               <center>
                   <h1>学员信息添加页面</h1>

                   <table border="2">

                       <!--选择操作页面-->

                       <tr>
                           <td><input type="radio" name="oper" value="1" checked/>单个学员添加操作</td>
                           <td><input type="radio" name="oper" value="2"/>多文件学员信息上传</td>
                       </tr>
                       <!--单个学员信息添加页面-->
                       <tr>
                           <td>学员姓名</td>
                           <td><input type="text"/></td>
                       </tr>

                       <tr>
                           <td>学员性别</td>
                           <td><input type="radio"/>男<input type="radio"/>女</td>
                       </tr>
                       <tr >
                           <td>学员学历</td>
                           <td>
                               <select  >
                                   <option>大专</option>
                                   <option>本科</option>
                                   <option>高中</option>
                                   <option>研究生</option>
                               </select>

                           </td>
                       </tr>
                       <tr>
                           <td><input  type="button" value="学员添加"/></td>
                           <td><input  type="reset"/></td>
                       </tr>
                       <!--文件上传学员信息页面-->

                       <tr style="display: none">
                           <td><input type="checkbox" id="ckOper"></td>
                           <td>上传文件</td>
                       </tr>

                    </table>



                   <table  border="2" style="display: none">

                       <tr>
                           <td><input type="button" value="添加上传文件" id="addBtn"/></td>
                           <td><input type="button" value="取消上传文件"/></td>
                       </tr>
                   </table>

               </center>
</body>
</html>